<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>血液订单信息</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
    <style type="text/css">
        .el-dialog {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 0 !important;
            transform: translate(-50%, -50%);
            max-height: calc(100% - 30px);
            max-width: calc(100% - 30px);
            display: flex;
            flex-direction: column;
        }

        .el-dialog__body {
            overflow: auto;
        }

        .el-row{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

    </style>
</head>

<body>
    <div class="data-manage-table">
        <template>
            <!--血液订单查询-->
            <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
                <el-form-item label="单号">
                    <el-input placeholder="请输入订单号" v-model="searchBloodToConfirm.number"></el-input>
                </el-form-item>
                <el-form-item label="血液类型">
                    <el-select v-model="searchBloodToConfirm.bloodType">
                        <el-option v-for="item in bloodType" :key="item.code" :label="item.composition" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select v-model="searchBloodToConfirm.state">
                        <el-option v-for="item in state"  :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="ABO血型">
                    <el-select v-model="searchBloodToConfirm.aboBloodType">
                        <el-option v-for="item in aboBloodType" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="RH血型">
                    <el-select v-model="searchBloodToConfirm.rhBloodType">
                        <el-option v-for="item in rhBloodType"  :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请人">
                    <el-input placeholder="请输入申请人姓名" v-model="searchBloodToConfirm.applicant"></el-input>
                </el-form-item>
                <el-form-item label="申请人工号">
                    <el-input placeholder="请输入申请人工号" v-model="searchBloodToConfirm.applicantNumber"></el-input>
                </el-form-item>
                <el-form-item label="申请日期">
                    <el-date-picker v-model="searchBloodToConfirm.dateVal" type="daterange" size="small" format="yyyy-MM-dd"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="clickSearchBloodOrder">搜索</el-button>
                    <el-button type="info" @click="emptySearch">重置</el-button>
                    <el-button type="" @click="exportExcel()">导出</el-button>
                </el-form-item>
            </el-form>
            
            <!--血液订单展示-->
            <el-table :data="orderBloodInformation" style="width: 100%" border
                :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                @current-change="" id="out-table">
                <el-table-column type="selection" width="55" align="center"></el-table-column>

                <el-table-column prop="number" label="单号" width="180" align="center">
                </el-table-column>

<!--                <el-table-column prop="serialNumber" label="流水号" width="180" align="center">-->
<!--                </el-table-column>-->

                <el-table-column prop="stateInfo" label="状态" width="120" align="center">
                </el-table-column>

                <el-table-column prop="typeInfo" label="血液类型" width="100" align="center">
                </el-table-column>

                <el-table-column prop="aboInfo" label="abo血型" width="100" align="center">
                </el-table-column>

                <el-table-column prop="rhInfo" label="rh血型" width="100" align="center">
                </el-table-column>

                <el-table-column label="总数/ml" width="100" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.measurementUnit * scope.row.cartAmount}}ml</span>
                    </template>
                </el-table-column>

                <el-table-column label="小计/元" width="100" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.bloodPrice * scope.row.cartAmount}}元 </span>
                    </template>
                </el-table-column>

                <el-table-column prop="cartAmount" label="数量/份" width="100" align="center">
                </el-table-column>

                <el-table-column prop="bloodPrice" label="单价/元" width="100" align="center">
                </el-table-column>

                <el-table-column prop="measurementUnit" label="计量单位/ml" width="100" align="center">
                </el-table-column>
                
                <el-table-column prop="applyCompany" label="申请单位" width="180" align="center">
                </el-table-column>

                <el-table-column label="申请日期" width="220" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{scope.row.applyTime}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column prop="applicant" label="申请人" width="100" align="center">
                </el-table-column>

<!--                <el-table-column prop="auditor" label="审核人" width="100" align="center">-->
<!--                </el-table-column>-->

<!--                <el-table-column label="审核时间" width="220" align="center">-->
<!--                    <template slot-scope="scope">-->
<!--                        <i class="el-icon-time"></i>-->
<!--                        <span style="margin-left: 10px">{{scope.row.auditTime}}</span>-->
<!--                    </template>-->
<!--                </el-table-column>-->

                <el-table-column label="操作" width="240" align="right" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="viewOrder(scope.$index, scope.row)">查看</el-button>
                        <el-button size="mini" type="primary" @click="auditClick(scope.$index, scope.row)" :disabled="scope.row.stateInfo!='订单等待审核'">审核</el-button>
                        <el-button size="mini" type="primary" @click="deleteBlood(scope.$index, scope.row)" :disabled="scope.row.isDeleted==1">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 查看订单-->
            <el-dialog title="查看订单" center :visible.sync="viewVisible" width="720px" @close="cancelView">
                <!-- 内容的主体区域 -->
                <el-form ref="form" :model="selectBlood" label-width="120px" >
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="订单号" prop="number" >
                                <el-input v-model="selectBlood.number" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="流水号" prop="serialNumber" >
                                <el-input v-model="selectBlood.serialNumber" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="订单状态" prop="stateInfo" >
                                <el-input v-model="selectBlood.stateInfo" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="申请日期" prop="applyTime" >
                                <el-input v-model="selectBlood.applyTime" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="ABO血型" prop="aboInfo" >
                                <el-input v-model="selectBlood.aboInfo" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="RH血型" prop="rhInfo" >
                                <el-input v-model="selectBlood.rhInfo" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="类型" prop="typeInfo" >
                                <el-input v-model="selectBlood.typeInfo" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        
                        <el-col :span="11">
                            <el-form-item label="总数（ml）">
                                <el-input v-model="selectBlood.measurementUnit * selectBlood.cartAmount + 'ml'" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="数量（份）" prop="cartAmount" >
                                <el-input v-model="selectBlood.cartAmount" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="计量单位（ml）" prop="measurementUnit" >
                                <el-input v-model="selectBlood.measurementUnit" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="单价（元）" prop="bloodPrice" >
                                <el-input v-model="selectBlood.bloodPrice" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="小计（元）" >
                                <el-input v-model="selectBlood.bloodPrice * selectBlood.cartAmount + '元'" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="申请人" prop="applicant" >
                                <el-input v-model="selectBlood.applicant" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="申请人工号" prop="applicantNumber" >
                                <el-input v-model="selectBlood.applicantNumber" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="审核人" prop="auditor" >
                                <el-input v-model="selectBlood.auditor" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="审核人工号" prop="auditorNumber" >
                                <el-input v-model="selectBlood.auditorNumber" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <!-- 底部区域 -->
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="cancelView">确 定</el-button>
                </span>
            </el-dialog>
            
            <!-- 审核订单-->
            <el-dialog title="审核订单" center :visible.sync="auditVisible" width="720px" @close="cancelAudit">
                <!-- 内容的主体区域 -->
                <el-form ref="form" :model="selectBlood" label-width="120px" >
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="订单号" prop="number" >
                                <el-input v-model="selectBlood.number" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="申请日期" prop="applyTime" >
                                <el-input v-model="selectBlood.applyTime" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="类型" prop="bloodType" >
                                <el-input v-model="selectBlood.bloodType" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="ABO血型" prop="aboInfo" >
                                <el-input v-model="selectBlood.aboInfo" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="RH血型" prop="rhInfo" >
                                <el-input v-model="selectBlood.rhInfo" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="计量单位" prop="cartAmount" >
                                <el-input v-model="selectBlood.cartAmount" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="数量" prop="measurementUnit" >
                                <el-input v-model="selectBlood.measurementUnit" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="血量" prop="bloodVolume" >
                                <el-input v-model="selectBlood.bloodVolume" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="申请人" prop="applicant" >
                                <el-input v-model="selectBlood.applicant" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="金额" prop="bloodPrice" >
                                <el-input v-model="selectBlood.bloodPrice" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="审核人" prop="auditor" >
                                <el-input v-model="selectBlood.auditor" readonly placeholder="请输入审核人" style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="审核人工号" prop="auditorNumber" >
                                <el-input v-model="selectBlood.auditorNumber" readonly placeholder="请输入审核人工号" style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <!-- 底部区域 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="refuseOrder">驳 回</el-button>
                    <el-button type="primary" @click="passOrder">通 过</el-button>
                </span>
            </el-dialog>
            
<!--            <el-pagination :page-size="pageSize" :total="total" :current-page.sync="current" layout="prev, pager, next, jumper"-->
<!--                class="pagination"  @current-change="handleCurrentChange" style="text-align: center; margin-top: 20px;" />-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-sizes="[1, 5, 10, 20]"
                    :page-size.sync="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    class="pagination"
                    style="text-align: center; margin-top: 20px;">
            </el-pagination>
        </template>
    </div>

    <script src="/plugins/vue-2.5.17/vue.js"></script>
    <script src="/plugins/element-2.4.5/index.js"></script>
    <script src="/icons/iconfont.js"></script>
    <script src="/js/axios.min.js"></script>


    <script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
    <script language="JavaScript" type="text/javascript">
        //Date原型上添加格式转换方法
        Date.prototype.format = function(fmt) {
            const o = {
                "M+": this.getMonth() + 1,                 //月份 
                "d+": this.getDate(),                    //日 
                "h+": this.getHours(),                   //小时 
                "m+": this.getMinutes(),                 //分 
                "s+": this.getSeconds(),                 //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds()             //毫秒 
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(const k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }
    </script>
    <script>
        (function () {
            const vm = window.vm = new Vue({
                el: '.data-manage-table',
                data() {
                    return {
                        total: 0,   //总记录数
                        current: 1,     //当前页
                        pageSize: 5,      //每页记录数
                        pages: 0,       //总页数
                        

                        viewVisible: false,   //修改血液订单信息 弹出框显示
                        auditVisible: false,    //审核血液订单  弹出框显示
                        currentChanged: false,  //查询模式是否变化

                        //ABO血型
                        aboBloodType: [],

                        //RH血型
                        rhBloodType: [],
                        
                        //血液类型选择
                        bloodType: [],
                        
                        //订单状态选择
                        state: [],
                        
                        //输入的查询条件，点击查询时赋值给searchBloodOrderDate
                        searchBloodToConfirm: {
                            number: '',     //单号
                            bloodType: '',    //申请的血液类型
                            aboBloodType: '',
                            rhBloodType: '',
                            state: '',      //订单状态
                            // deleteFlag: '',     //删除标记
                            applicant: '',       //申请
                            applicantNumber: '',    //申请人工号
                            dateVal: '',    //申请日期
                        },
                        
                        //搜索血液订单信息
                        searchBloodOrderDate: {
                            number: '',     //单号
                            bloodType: '',    //申请的血液类型
                            aboBloodType: '',
                            rhBloodType: '',
                            state: '',      //订单状态
                            // deleteFlag: '',     //删除标记
                            applicant: '',       //申请人
                            applicantNumber: '',    //申请人工号
                            dateVal: '',    //申请日期
                        },
                        
                        //选中的血液订单信息
                        selectBlood: {},

                        //查询到的血液信息
                        orderBloodInformation: [],

                        modifyFormRules: {
                            bloodType: [{required: true, message: '请选择血液类型', trigger: 'blur'}],
                            bloodVolume:  [{required: true, message: '请输入血量', trigger: 'blur'}],
                        }
                    }
                },

                computed: {
                },

                watch: {
                    'selectBlood.cartAmount': function () {
                        // console.log("数量变化为" + this.selectBlood.cartAmount)
                    }
                },

                methods: {
                    //分页查询，显示在table中
                    // fetchPageData(current, limit) {
                    //     axios({
                    //         method: "get",
                    //         url: "/bloodOrders/listByPage",
                    //         params: {
                    //             currentPage: this.current,
                    //             pageSize: this.pageSize
                    //         }
                    //     }).then(res => {
                    //         if (res.status == '200') {
                    //             this.orderBloodInformation = res.data.data;  //更新数据
                    //             this.total = res.data.total;
                    //             this.pages = res.data.pages;
                    //         } else {
                    //             this.total = res.data.total;
                    //             this.pages = res.data.pages;
                    //             this.$notify({
                    //                 tile: '警告',
                    //                 message: '获取分页服务内部错误',
                    //                 type: 'warning'
                    //             })
                    //         }
                    //     }).catch(err => {
                    //         this.$notify.error({
                    //             title: '错误',
                    //             message: '获取分页数据失败',
                    //         })
                    //     })
                    // },

                    handleSizeChange(val) {
                        this.current = 1
                        this.pageSize = val
                        this.searchBloodOrder()
                    },

                    //获取全部订单状态
                    getInformation: function(val) {
                        //获取订单状态
                        axios({
                            url: '/orderBloodState/query',
                            method: 'get',
                            params: {},
                        }).then(res => {
                            if (res.status == 200) {
                                this.state = res.data
                            }
                        }).catch(err => {

                        })

                        //获取AboType
                        axios({
                            url: '/aboType/normal/query',
                            method: 'get',
                            params: {},
                        }).then(res => {
                            if (res.status == 200) {
                                this.aboBloodType = res.data
                            }
                        }).catch(err => {

                        })

                        //获取RhType
                        axios({
                            url: '/rhType/normal/query',
                            method: 'get',
                            params: {},
                        }).then(res => {
                            if (res.status == 200) {
                                this.rhBloodType = res.data
                            }
                        }).catch(err => {

                        })

                        //获取BloodComposition
                        axios({
                            url: '/bloodComposition/normal/query',
                            method: 'get',
                            params: {},
                        }).then(res => {
                            if (res.status == 200) {
                                this.bloodType = res.data
                            }
                        }).catch(err => {

                        })
                    },

                    //点击页码
                    handleCurrentChange: function (val) {
                        this.searchBloodOrder()
                    },
                    
                    //点击查询按钮
                    clickSearchBloodOrder(){
                        this.current = 1
                        let dateVal = this.searchBloodToConfirm.dateVal
                        if (dateVal.length > 0) {
                            //日期格式转换
                            for (let i = 0; i < dateVal.length; i++) {
                                if(dateVal[i] instanceof Date)
                                    this.searchBloodToConfirm.dateVal[i] = dateVal[i].format("yyyy-MM-dd")
                            }
                        }
                        this.searchBloodOrderDate = JSON.parse(JSON.stringify(this.searchBloodToConfirm))
                        this.searchBloodOrder()
                    },

                    //根据查询条件查询血液订单
                    searchBloodOrder() {
                        //单号
                        let number = this.searchBloodOrderDate.number
                        //血液类型
                        let bloodType = this.searchBloodOrderDate.bloodType
                        let aboBloodType = this.searchBloodOrderDate.aboBloodType
                        let rhBloodType = this.searchBloodOrderDate.rhBloodType
                        //订单状态
                        let state = this.searchBloodOrderDate.state
                        //申请人
                        let applicant = this.searchBloodOrderDate.applicant
                        //申请人工号
                        let applicantNumber = this.searchBloodOrderDate.applicantNumber
                        //日期范围
                        let dateVal = this.searchBloodOrderDate.dateVal
                        let startTime = dateVal[0]
                        let endTime = dateVal[1]

                        axios({
                            url: '/bloodOrder/normal/searchBloodOrder',
                            method: 'get',
                            params: {
                                number: number,
                                bloodType: bloodType,
                                aboBloodType: aboBloodType,
                                rhBloodType: rhBloodType,
                                state: state,
                                applicant: applicant,
                                applicantNumber: applicantNumber,
                                startTime: startTime != null ? startTime : '',
                                endTime: endTime != null ? endTime : '',
                                currentPage: this.current,
                                pageSize: this.pageSize
                            },
                        }).then(res => {
                            if (res.status == '200') {
                                this.orderBloodInformation = res.data.data;
                                this.total = res.data.total;
                                this.pages = res.data.pages;
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '搜索出错',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '搜索失败',
                            })
                        })
                    },
                    
                    //清空搜索条件
                    emptySearch() {
                        for (const key in this.searchBloodOrderDate)
                            this.searchBloodOrderDate[key] = ""
                        for (const key in this.searchBloodToConfirm)
                            this.searchBloodToConfirm[key] = ""
                    },
                    
                    
                    //点击查看按钮
                    viewOrder(index, row){
                        //选中的样本  深拷贝
                        this.selectBlood = JSON.parse(JSON.stringify(this.orderBloodInformation[index]))
                        //显示弹出框
                        this.viewVisible = true
                    },
                    
                    //点击审核按钮
                    auditClick(index, row){
                        //选中的样本  深拷贝
                        this.selectBlood = JSON.parse(JSON.stringify(this.orderBloodInformation[index]))
                        
                        //   后期获取，需要更改
                        this.selectBlood.auditor = "张三"
                        this.selectBlood.auditorNumber = "111"
                        
                        //显示弹出框
                        this.auditVisible = true
                    },
                    
                    //审核弹出框，点击驳回
                    refuseOrder(){
                        if(this.selectBlood.auditor != "" && this.selectBlood.auditorNumber != "") {
                            axios({
                                url: '/bloodOrder/review/refuseBloodOrder',
                                method: 'post',
                                data: this.selectBlood
                            }).then(res => {
                                if (res.data.code == '200') {
                                    this.handleCurrentChange(this.current)
                                    this.auditVisible = false
                                    this.$notify({
                                        tile: '成功',
                                        message: '审核成功',
                                        type: 'success'
                                    })
                                } else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '审核出错',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '审核失败',
                                })
                            })
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '请填写审核人信息',
                            })
                        }
                    },
                    
                    //审核弹出框，点击通过
                    passOrder(){
                        if(this.selectBlood.auditor != "" && this.selectBlood.auditorNumber != "") {
                            axios({
                                url: '/bloodOrder/review/passBloodOrder',
                                method: 'post',
                                data: this.selectBlood
                            }).then(res => {
                                if (res.data.code == '200') {
                                    this.handleCurrentChange(this.current)
                                    this.auditVisible = false
                                    this.$notify({
                                        tile: '成功',
                                        message: '审核成功',
                                        type: 'success'
                                    })
                                } else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '审核出错',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '审核失败',
                                })
                            })
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '请填写审核人信息',
                            })
                        }
                    },

                    //新增血液信息检查
                    verifyAddBlood(newSample){
                       
                    },
                    
                    //修改弹出框：点击取消
                    cancelView(){
                        this.viewVisible = false
                        this.selectBlood = {}
                    },
                    
                    //审核弹出框：点击取消
                    cancelAudit(){
                        this.selectBlood = {}
                    },

                    //删除订单
                    deleteBlood(index, row) {
                        this.selectBlood = JSON.parse(JSON.stringify(this.orderBloodInformation[index]))
                        this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        })
                        .then(async () => {
                            axios({
                                url: '/bloodOrder/normal/deleteBloodOrder',
                                method: 'post',
                                data: this.selectBlood
                            }).then(res => {
                                console.log(res)
                                if (res.data.code == '200') {
                                    this.handleCurrentChange(this.current)
                                    this.$notify({
                                        tile: '成功',
                                        message: '删除成功',
                                        type: 'success'
                                    })
                                } else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '删除出错',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '删除失败',
                                })
                            })
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "已取消删除",
                            });
                        });
                    },
                    
                    //导出excel
                    exportExcel () {
                        //单号
                        let number = this.searchBloodOrderDate.number
                        //血液类型
                        let bloodType = this.searchBloodOrderDate.bloodType
                        //订单状态
                        let state = this.searchBloodOrderDate.state
                        //申请人
                        let applicant = this.searchBloodOrderDate.applicant
                        //申请人工号
                        let applicantNumber = this.searchBloodOrderDate.applicantNumber
                        //日期范围
                        let dateVal = this.searchBloodOrderDate.dateVal
                        //日期格式转换
                        for (let i = 0; i < dateVal.length; i++) {
                            if(dateVal[i] instanceof Date)
                                dateVal[i] = dateVal[i].format("yyyy-MM-dd")
                        }
                        let startTime = dateVal[0] != null ? dateVal[0] : ''
                        let endTime = dateVal[1] != null ? dateVal[1] : ''
                        //创建a标签元素
                        const a = document.createElement('a')
                        a.href = 'http://localhost:8080/bloodOrder/normal/downloadExcel?' + 'number=' + number + '&bloodType=' + bloodType + '&state=' + state + '&applicant=' + applicant + '&applicantNumber=' + applicantNumber + '&startTime=' + startTime +  '&endTime=' + endTime
                        a.click()
                    }
                },

                mounted() {
                    this.searchBloodOrder()
                    this.getInformation()
                }
            });    
        })()
    </script>

</body>

</html>